<template>
	<view class="container">
		<uni-card>
			<uni-forms-item label="欠款金额:" label-width="85px">
				<text>{{owedAmount}}</text>
			</uni-forms-item>
		</uni-card>
		<button type="primary" @click="submitPay" :disabled="btn_disabled"
			style="margin-top: 20px;background-color: #4c94d9;margin-left: 15px;margin-right: 15px;border-radius: 5px;">确认付款</button>
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="popup.msgType" :message="popup.msg" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	//个人信息
	export default {
		data() {
			return {
				openId: "",
				btn_disabled: false,
				owedAmount: "0.00",
				popup: {
					msg: "",
					msgType: "success",
				},
			}
		},
		onShow() {
			this.getCurrentOwedAmount()
		},
		onReady() {
			let that = this;
			uni.getStorage({
				key: 'wx_openid',
				success: function(res) {
					that.openId = res.data
				}
			});
		},
		methods: {
			getCurrentOwedAmount() {
				let that = this;
				uni.getStorage({
					key: 'wx_openid',
					success: function(res) {
						that.openid = res.data;
						uni.request({
							method: 'POST',
							url: that.baseUrl + "/my/owedAmount",
							data: {
								openid: that.openid
							},
							success(ress) {
								if (ress.data.type === 'success') {
									that.owedAmount = ress.data.data.owedAmount;
								}
							}
						})
					},
				});
			},
			submitPay() {
				let that = this;
				uni.request({
					url: that.baseUrl + '/my/create-owed-order',
					method: 'GET',
					data: {
						openId: that.openId
					},
					success(res) {
						if (res.data.type === 'success') {
							let orderData = res.data.data;
							that.createPayOrder(orderData);
						} else {
							that.popup.msg = res.data.msg;
							that.popup.msgType = 'error';
							that.$refs.message.open()
							that.btn_disabled = false;
						}
					}
				})
			},
			createPayOrder(orderData) {
				let that = this;
				uni.request({
					url: that.baseUrl + '/wx/pay/unifiedOrder',
					method: 'GET',
					data: {
						outTradeNo: orderData.orderNo,
						amount: orderData.goodsPrice,
						goodsDescription: orderData.goodsDescription,
						openId: that.openId
					},
					success(res) {
						if (res.data.type === 'success') {
							let orderRes = res.data.data;
							uni.requestPayment({
								provider: 'wxpay',
								nonceStr: orderRes.nonceStr,
								package: orderRes.package_,
								timeStamp: orderRes.timeStamp,
								signType: orderRes.signType,
								paySign: orderRes.paySign,
								success: function(res) {
									that.popup.msg = "付款成功";
									that.popup.msgType = 'success';
									that.$refs.message.open();
									that.btn_disabled = false;
								},
								fail: function(err) {
									let msg = "付款失败"
									if (err.errMsg === 'requestPayment:fail cancel') {
										msg = "您已取消支付"
									}
									that.popup.msg = msg;
									that.popup.msgType = 'error';
									that.$refs.message.open();
									that.btn_disabled = false;
								}
							});
						} else {
							that.popup.msg = res.data.msg;
							that.popup.msgType = 'error';
							that.$refs.message.open()
							that.btn_disabled = false;
						}
					}
				})
			},
		}
	}
</script>

<style>
	/deep/ .uni-forms-item {
		margin-bottom: 0 !important;
	}

	/deep/ .uni-forms-item__content {
		padding-top: .5rem !important;
		font-size: 19px !important;
	}
</style>